<template>
  <div id="Practice" v-loading="loading">
    <div class="main-contianer" v-if="hasClass">
      <div class="main-left">
        <div class="top cursor">
          <img src="~@/assets/images/icon_sjjn@2x.png" style="margin: 20px auto;display: block;" @click="$router.push({ name: 'skill' })" />
          <div class="item flex-row">
            <span>语言技能</span>
            <img src="~@/assets/images/icon_tlxl@2x.png" @click="$router.push({ name: 'hearinghome' })" alt />
            <img src="~@/assets/images/icon_kycp@2x.png" @click="$router.push({ name: 'skillfollow' })" alt />
          </div>
          <div class="item flex-row" style="margin-top: 20px;">
            <span>能力提升</span>
            <img src="~@/assets/images/icon_alfx@2x.png" @click="$router.push({ name: 'caseAnalyse' })" alt />
            <img src="~@/assets/images/icon_hdsx@2x.png" @click="$router.push({ name: 'interactionHome' })" alt />
            <img src="~@/assets/images/icon_zhal@2x.png" @click="$router.push({ name: 'multiple' })" alt />
          </div>
        </div>
        <!-- <div class="bottom">
          <h3>学习时间</h3>
          <div class="title" style="display:flex;">
            <div style="flex:1;">今日课程学习时长：1‘12</div>
            <div style="flex:1;">班级课程学习平均时长：2‘35</div>
            <div style="flex:1;"></div>
          </div>
          <div id="chart_example" style="clear:both"></div>
        </div> -->
      </div>
      <div class="main-right">
        <div class="title flex-row">
          <div class="title-left">实践动态</div>
          <div class="title-right">查看更多</div>
        </div>
        <ul v-if="trendsList.length > 0">
          <li v-for="(item, index) in trendsList" :key="index" class="flex-row">
            <div class="name">【实践技能】</div>
            <div class="time ellipsis">{{item.name}} {{item.createdTime}} 完成</div>
            <div class="lesson-title ellipsis">{{item.trendsTypeName}}</div>
          </li>
        </ul>
        <div v-else class="g-no-data">暂无动态</div>
      </div>
    </div>
    <NoList @updateLesson="getLessonId" v-else/>
  </div>
</template>

<script>
import { main } from '@/api/student/lesson/index.js'

import NoList from '@/views/student/components/NoList'
import { getLessonId } from '@/api/student/lesson/index'

// 引入基本模板
// let echarts = require('echarts')
export default {
  name: 'Practice',
  components: {
    NoList
  },
  data () {
    return {
      hasClass: false,
      lessonId: '',
      trendsList: [],
      loading: true
      // option: {
      //   legend: {
      //     data: ['今日课程学习时长', '班级课程平均学习时长'],
      //     right: 0,
      //     orient: 'vertical'
      //   },
      //   xAxis: {
      //     type: 'category',
      //     data: ['1', '2', '3', '4', '5', '6', '7']
      //   },
      //   yAxis: {
      //     type: 'value'
      //   },
      //   series: [
      //     {
      //       name: '今日课程学习时长',
      //       type: 'line',
      //       itemStyle: {
      //         normal: {
      //           color: '#009CF6',
      //           lineStyle: {
      //             color: '#009CF6'
      //           }
      //         }
      //       },
      //       data: [1.1, 1.5, 2, 1.4, 2.5, 3, 3.5, 1.2, 2.2, 1]
      //     },
      //     {
      //       name: '班级课程平均学习时长',
      //       type: 'line',
      //       itemStyle: {
      //         normal: {
      //           color: '#F86F33',
      //           lineStyle: {
      //             color: '#F86F33'
      //           }
      //         }
      //       },
      //       data: [1.8, 2.4, 3.3, 3.0, 2.8, 2.7, 1.5]
      //     }
      //   ]
      // }
    }
  },
  mounted () {
    this.getLessonId()
  },
  methods: {
    // 获取课程id 判断是否已加入课程
    async getLessonId () {
      this.loading = true
      const res = await getLessonId()
      if (res.code === '200') {
        this.hasClass = res.data.hasClass
        this.lessonId = res.data.lessonId || ''
        if (this.hasClass && this.lessonId) {
          this.getMain()
          // this.initChart()
        }
      } else {
        this.$message.error(res.message)
      }
      this.loading = false
    },
    async getMain () {
      const res = await main({
        lessonType: '2'
      })
      if (res.code === '200') {
        this.trendsList = res.data.trendsList
      } else {
        this.$message.error(res.message)
      }
    }
    // initChart () {
    //   let myChart = echarts.init(document.getElementById('chart_example'))
    //   myChart.setOption(this.option)

    //   // 建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    //   window.addEventListener('resize', function () {
    //     myChart.resize()
    //   })
    // }
  }
}
</script>

<style scoped lang="scss">
#Practice {
  .main-contianer {
    display: flex;
    justify-content: space-between;
  }
  .main-left {
    width: 728px;
    overflow: hidden;
    .top {
      width: 100%;
      // height: 310px;
      height: 839px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      box-sizing: border-box;
      .item {
        font-size: 20px;
        font-weight: 500;
        color: rgba(16, 29, 55, 1);
        line-height: 52px;
        padding: 0 20px;
        img {
          vertical-align: middle;
          cursor: pointer;
        }
      }
    }
    // .bottom {
    //   background: rgba(255, 255, 255, 1);
    //   border: 1px solid rgba(229, 229, 229, 1);
    //   border-radius: 5px;
    //   margin-top: 20px;
    //   padding: 20px;
    //   #chart_example {
    //     width: 90%;
    //     height: 490px;
    //     margin: 0 auto;
    //   }
    //   .title {
    //     font-size: 16px;
    //     font-weight: 500;
    //     color: rgba(16, 29, 55, 1);
    //     line-height: 52px;
    //   }
    // }
  }
  .main-right {
    width: 452px;
    height: 839px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 5px;
    box-sizing: border-box;
    .title {
      margin-top: 30px;
      padding: 0 20px;
      .title-left {
        font-weight: 500;
        font-size: 24px;
        color: rgba(16, 29, 55, 1);
      }
      .title-right {
        font-size: 14px;
        font-weight: 500;
        color: #009cf6;
        cursor: pointer;
        margin-top: 10px;
      }
      .title-right:hover {
        color: rgba(16, 29, 55, 1);
        opacity: 0.3;
      }
    }
    ul {
      height: 90%;
      list-style: none;
      margin-top: 30px;
      overflow: auto;
      padding: 0 20px;
      li {
        font-size: 16px;
        font-weight: 500;
        color: rgba(16, 29, 55, 1);
        line-height: 24px;
        margin-bottom: 20px;
        overflow: hidden;
        .name {
          font-size: 16px;
          font-weight: 500;
          color: #5a74a6;
          line-height: 24px;
          cursor: pointer;
          width: 24%;
        }
        .time {
          width: 50%;
          color: #101D37;
        }
        .lesson-title {
          width: 20%;
        }
      }
    }
  }
}
</style>
